<template>
  <view class="container">
    <view class="info-header">
      <image :src="infoDetail.image" mode="aspectFill" class="header-image"></image>
      <view class="header-overlay"></view>
      <view class="header-content">
        <text class="title">{{ infoDetail.title }}</text>
      </view>
    </view>
    
    <view class="info-content">
      <view class="content-card">
        <view class="card-header">
          <text class="card-title">详细信息</text>
        </view>
        <view class="card-body">
          <text class="content-text">{{ infoDetail.content }}</text>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      infoDetail: {
        id: 0,
        title: '',
        description: '',
        image: '',
        content: ''
      },
      // 模拟数据库中的社区信息数据
      communityInfoData: [
        {
          id: 1,
          title: '垃圾分类指南',
          description: '了解如何正确分类垃圾，共建绿色社区',
          image: '/static/image/garbage-sorting.png',
          content: '垃圾分类是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。\n\n【可回收垃圾】\n纸类：报纸、杂志、图书、纸袋等\n塑料：饮料瓶、塑料袋、塑料玩具等\n金属：易拉罐、罐头盒、铁制品等\n玻璃：玻璃瓶、玻璃杯等\n\n【厨余垃圾】\n食物残渣、果皮、蛋壳、茶渣等\n\n【有害垃圾】\n废电池、废灯管、过期药品、废油漆等\n\n【其他垃圾】\n卫生纸、尿不湿、烟头、陶瓷碎片等\n\n正确的垃圾分类不仅可以减少环境污染，还能节约资源，让我们一起行动起来，共建绿色社区！'
        },
        {
          id: 2,
          title: '紧急联系方式',
          description: '物业、消防、医疗等紧急联系方式',
          image: '/static/image/emergency-contact.jpg',
          content: '【物业服务】\n物业24小时热线：400-123-4567\n物业办公室：0755-12345678\n安保部：0755-87654321\n\n【紧急救援】\n消防报警：119\n医疗急救：120\n匪警：110\n交通事故：122\n\n【医疗服务】\n市第一人民医院：0755-11112222（距小区3公里）\n社区医疗服务中心：0755-33334444（距小区500米）\n\n【其他服务】\n自来水公司：0755-55556666\n供电公司：0755-77778888\n燃气公司：0755-99990000\n\n请将此页面保存或截图，以备不时之需。在紧急情况下，请保持冷静，及时拨打相应的紧急电话。'
        },
        {
          id: 3,
          title: '社区便民服务',
          description: '快递、洗衣、家政等服务信息',
          image: '/static/image/convenience.png',
          content: '【快递服务】\n小区南门快递驿站\n营业时间：8:00-20:00\n联系电话：0755-12345678\n支持快递：顺丰、京东、圆通、中通、申通等\n\n【洗衣服务】\n洁净洗衣店（小区商业街A12铺）\n营业时间：9:00-21:00\n联系电话：13812345678\n特色服务：高端衣物护理、皮具保养、窗帘清洗\n\n【家政服务】\n阿姨到家\n预约电话：13987654321\n服务内容：日常保洁、深度清洁、月嫂、育儿嫂\n\n【便民维修】\n万能师傅\n联系电话：13876543210\n服务内容：水电维修、家具安装、家电维修\n\n【社区食堂】\n位置：东门商业街B栋一层\n营业时间：早餐6:30-9:00，午餐11:00-13:30，晚餐17:00-20:00\n特色：提供健康家常菜，可堂食可外带，支持电话预订\n预订电话：0755-66668888'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = parseInt(options.id)
      this.getInfoDetail()
    }
  },
  methods: {
    getInfoDetail() {
      // 实际项目中应该从API获取数据
      // 这里使用模拟数据
      const info = this.communityInfoData.find(item => item.id === this.id)
      if (info) {
        this.infoDetail = info
      } else {
        uni.showToast({
          title: '未找到相关信息',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    },
    shareInfo() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    },
    saveInfo() {
      uni.showToast({
        title: '收藏成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f9fc;
  display: flex;
  flex-direction: column;
}

.info-header {
  position: relative;
  height: 400rpx;
  width: 100%;
  
  .header-image {
    width: 100%;
    height: 100%;
  }
  
  .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
  }
  
  .header-content {
    position: absolute;
    bottom: 40rpx;
    left: 40rpx;
    right: 40rpx;
    
    .title {
      font-size: 44rpx;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
  }
}

.info-content {
  flex: 1;
  padding: 30rpx;
  margin-top: -50rpx;
  position: relative;
  z-index: 1;
  
  .content-card {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    .card-header {
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .card-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 30rpx;
          background: #6a11cb;
          border-radius: 3rpx;
        }
      }
    }
    
    .card-body {
      padding: 30rpx;
      
      .content-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.8;
        white-space: pre-wrap;
      }
    }
  }
}
</style> 